<template>
	<view class='login'>
		<image class="top-bg" src="@/static/login/bg-login.png" mode="widthFix"></image>
		<nav-bar class="navbar" :title="navTitle" :isShowBack="false"></nav-bar>

		<view class="logo">
			<image class="logo-icon" src="@/static/login/icon-logo-star.png"></image>
			<text class="logo-title">MINIflix</text>
		</view>

		<view class="content">
			<view class="detail">
				<SignUpMain />

			</view>
		</view>

		<view class="whole-Mask" v-if="is_Outside" @click="gois_Outside()">
			<view class="guide-whole">
				 <view class="guide-title">
					   <view>Click on the top right corner···</view>
					   <view>Choose the default browser to open and download</view>
				 </view>

			     <image class="guide-img" mode="scaleToFill" src="@/static/img/zy.png"></image>
		   </view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import SignUpMain from './components/SignUpMain.vue'


	export default {
		components: {
			NavBar,
			SignUpMain,
		},
		data() {
			return {
				inviteCode: '',
				phoneCode: '',
				is_Outside: false,
				email: ''
			}
		},
		computed: {
			navTitle() {
				return ''
			}
		},
		created() {
			if(this.isWeChatBrowser()) return
			console.log('inviteCode:', this.$store.state.otherInviteCode)
		},
		methods: {
			handleCloseDownload() {
				this.$refs?.download.close()
			},
			handleJumpLink() {
				window.location.href='https://beian.miit.gov.cn/'
			},
			handleGoBrowser () {
				this.is_Outside = true
			},
			async handleDownLoadApp() {
				const { platform } = uni.getSystemInfoSync()
				switch(platform) {
					case 'android':
					window.location.href = 'https://apw.miniflixvideo.com/apk/miniflix.apk'
					break;

					case 'ios':
					uni.showToast({
						title: 'Not currently supported on iOS platform',
						duration: 1500,
						icon: 'none'
					})
					break;
				}
			},
			handleShowDownload(email) {
				this.email = email
				this.$refs?.download.open('center')
			},
			handleDownload() {
				this.handleDownLoadApp()
			},
			gois_Outside() {
				this.is_Outside = false
			},
			isWeChatBrowser() {
				const me = navigator.userAgent.toLowerCase();
				if (me.match(/MicroMessenger/i) == "micromessenger") {
					console.log('微信浏览器')
					this.is_Outside = true
					return true
				}
				return false
			},

		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 750upx;
		margin: 0 auto;
		min-height: 100vh;
		position: relative;
		padding-bottom: 24upx;
		background: #0C0423;
		.top-bg {
			width: 100%;
			// min-height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.top-bg-star {
			position: absolute;
			left: 50%;
			top: 0;
			transform: translateX(-50%);
			width: 564upx;
			height: 468upx;
		}

		.navbar {
			padding-top: 20upx;
		}

		.logo {
			width: 200upx;

			display: flex;
			flex-direction: column;
			align-items: center;

			margin: 8upx auto 0;

			position: relative;

			.logo-icon {
				width: 200upx;
				height: 200upx;
			}

			.logo-title {
				color: #FFF;

				text-align: center;
				font-family: "PingFang SC";
				font-size: 48upx;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
				margin-top: 8upx;
			}
		}

		.content {
			width: 100%;
			padding: 0 52upx;
			box-sizing: border-box;

			position: relative;

			margin-top: 40upx;

			.detail {
				width: 100%;
			}
		}

		.whole-Mask {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.8);
			z-index: 999;
		}

		.guide-whole {
			width: 100%;
			padding:100upx;
			color: #fff;
			margin-top: 100upx;
		}
		.guide-title {
			// float: left;
		}
		.guide-title view{
			color: #fff;
		}
		.guide-img {
			position: absolute;
			right: 0;
			top: 0;
			width: 160upx;
			height: 124upx;
		}
	}

	.bottom {
		font-size: 28upx;
		text-align: center;
		margin-top: 10upx;
		position: relative;
		color: #fff;
	}
</style>